<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test link detection across iframes</title>
<!-- <script src="/pages/loader.js"></script> -->
</head>
<body style="margin: 10px 0 0 50px">
<div style="height:16px; border-bottom: 1px solid gray; padding-bottom: 4px;">before iframe</div>
<div style="width: 1100px;height:420px">
  <div id="box" style="overflow:auto;width:400px;height:400px;display:inline-block;outline:1px solid #ff7777">
    <iframe id="iframe1" name="test1" style="width:600px;border:none;outline:1px solid red;height:380px"></iframe>
  </div>
  1st iframe ; iframe 2nd
  <div id="box" style="overflow:auto;width:400px;height:400px;display:inline-block;outline:1px solid #7777ff">
    <iframe id="iframe2" name="test2" style="width:100%;border:none;outline:1px solid blue;height:600px"></iframe>
  </div>
</div>
<div style="clear:both">after iframe</div>
  <!-- '<script src="/pages/loader.js"></script>', -->
<script type="text/javascript">
addEventListener("load", function() {
var doc = iframe1.contentDocument;
doc.firstElementChild.innerHTML = [
  // '<body style="width:100%;height:600px;margin:0;',
  '<body style="width:600px;height:360px;margin:0;',
      'text-align:center;vertical-align:middle;">',
  '<div role="button" style="margin:0 10px;height:100px;">[  0, 100) px</div>',
  '<div role="button" style="margin:0 10px;height:100px;">[100, 200) px</div>',
  '<div role="button" style="margin:0 10px;height:100px;">[200, 300) px</div>',
  '<div role="button" style="margin:0 10px;height:100px;">[300, 400) px</div>',
  '<div role="button" style="margin:0 10px;height:100px;">[400, 500) px</div>',
  '<div role="button" style="margin:0 10px;height:100px;">[500, 600) px</div>',
  '<div role="button" style="margin:0 10px;height:100px;">[600, 700) px</div>',
  '<div role="button" style="margin:0 10px;height:100px;">[700, 800) px</div>',
  '</body>',
  ''].join("\n");
doc.firstElementChild.style.background = "#eee";
doc.onclick = function(e){
  e.target.style.backgroundColor = e.target.style.backgroundColor ? "" : "#ff9999";
  e.target.ownerDocument.defaultView.location.reload();
}
});
addEventListener("load", function() {
var doc = iframe2.contentDocument;
doc.firstElementChild.innerHTML = [
  '<body style="width:100%;height:600px;margin:0;',
      'text-align:center;vertical-align:middle;">',
  '<div role="button" style="margin:0 10px;height:100px;">[  0, 100) px</div>',
  '<div role="button" style="margin:0 10px;height:100px;">[100, 200) px</div>',
  '<div role="button" style="margin:0 10px;height:100px;">[200, 300) px</div>',
  '<div role="button" style="margin:0 10px;height:100px;">[300, 400) px</div>',
  '<div role="button" style="margin:0 10px;height:100px;">[400, 500) px</div>',
  '<div role="button" style="margin:0 10px;height:100px;">[500, 600) px</div>',
  '<div role="button" style="margin:0 10px;height:100px;">[600, 700) px</div>',
  '<div role="button" style="margin:0 10px;height:100px;">[700, 800) px</div>',
  '</body>',
  ''].join("\n");
doc.firstElementChild.style.background = "#eee";
doc.onclick = function(e){
  e.target.style.backgroundColor = e.target.style.backgroundColor ? "" : "#9999ff";
}
});
</script>
</body>
</html>
